<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('添加立体库库存管理')"/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
        .num {
            width: 50px;
            display: inline-block!important;
            padding: 0!important;
            text-align: center;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-boxItem-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">托盘号：</label>
            <div class="col-sm-8">
                <input id="boxCode" name="boxCode" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">物料名称：</label>
            <div class="col-sm-8">
                <select id="itemCode" name="itemCode" class="form-control">
                    <option v-for="(item, index) in items" :key="index" :value="item.itemCode" v-cloak>{{item.itemName}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">数量：</label>
            <div class="col-sm-8">
                <input id="quantity" name="quantity" class="form-control" type="number" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">货位描述：</label>
            <div class="col-sm-8">
                <input type="number" class="num form-control" :min="0" :max="1" v-model="num_0" @change="concatNum">
                <input type="number" class="num form-control" :min="0" :max="9" v-model="num_1" @change="concatNum">
                排
                <input type="number" class="num form-control" :min="0" :max="0" v-model="num_2" @change="concatNum">
                <input type="number" class="num form-control" :min="0" :max="2" v-model="num_3" @change="concatNum">
                <input type="number" class="num form-control" :min="0" :max="9" v-model="num_4" @change="concatNum">
                列
                <input type="number" class="num form-control" :min="0" :max="0" v-model="num_5" @change="concatNum">
                <input type="number" class="num form-control" :min="1" :max="4" v-model="num_6" @change="concatNum">
                层
                <input type="hidden" id="cellCode" name="cellCode" :value="checkCellCode"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">批次：</label>
            <div class="col-sm-8">
                <select id="batch" name="batch" class="form-control">
                    <option v-for="(item, index) in batchs" :key="index" :value="item.batchName" v-cloak>{{item.batchName}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">生产日期：</label>
            <div class="col-sm-8">
                <input type="text" class="time-input form-control" id="pd" name="pd" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">码垛时间：</label>
            <div class="col-sm-8">
                <el-date-picker
                    id="stowCreateTime"
                    name="stowCreateTime"
                    v-model="checkStowCreateTime"
                    :clearable="false"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "in/boxItem";

    function submitHandler(){
        if(app.flag == false){
            $.modal.alertError("请检查货位编码是否输入合理！！");
            return;
        }else{
            if(app.checkStowCreateTime == ''){
                $.modal.alertError("请选择码垛时间！！");
                return;
            }else{
                if($.validate.form()){
                    $.operate.save(prefix + "/add", $('#form-boxItem-add').serialize());
                }
            }
        }
    }

    var app = new Vue({
        el: '.wrapper',
        data: {
            batchs: [],
            items: [],
            checkCellCode: '0100101',
            num_0: '0',
            num_1: '1',
            num_2: '0',
            num_3: '0',
            num_4: '1',
            num_5: '0',
            num_6: '1',
            flag: true,
            state: false,
            checkStowCreateTime: ''
        },
        methods: {
            concatNum(){
                if(this.num_0 == 0){
                    if(this.num_1 <= 0 || this.num_1 >= 10){
                        $.modal.alertError("排的范围为：01 -- 12，请正确输入！！");
                        this.flag = false;
                        return;
                    }else{
                        this.flag = true;
                    }
                }else if(this.num_0 == 1){
                    if(this.num_1 < 0 || this.num_1 >= 3){
                        $.modal.alertError("排的范围为：01 -- 12，请正确输入！！");
                        this.flag = false;
                        return;
                    }else{
                        this.flag = true;
                    }
                }else{
                    $.modal.alertError("排的范围为：01 -- 12，请正确输入！！");
                    this.flag = false;
                    return;
                }
                if(this.num_2 == 0){
                    if(this.num_3 == 0){
                        if(this.num_4 <= 0 || this.num_4 >= 10){
                            $.modal.alertError("列的范围为：001 -- 024，请正确输入！！");
                            this.flag = false;
                            return;
                        }else{
                            this.flag = true;
                        }
                    }else if(this.num_3 == 1){
                        if(this.num_4 < 0 || this.num_4 >= 10){
                            $.modal.alertError("列的范围为：001 -- 024，请正确输入！！");
                            this.flag = false;
                            return;
                        }else{
                            this.flag = true;
                        }
                    }else if(this.num_3 == 2){
                        if(this.num_4 < 0 || this.num_4 >= 5){
                            $.modal.alertError("列的范围为：001 -- 024，请正确输入！！");
                            this.flag = false;
                            return;
                        }else{
                            this.flag = true;
                        }
                    }else{
                        $.modal.alertError("列的范围为：001 -- 024，请正确输入！！");
                        this.flag = false;
                        return;
                    }
                }else{
                    $.modal.alertError("列的范围为：001 -- 024，请正确输入！！");
                    this.flag = false;
                    return;
                }
                if(this.num_5 == 0){
                    if(this.num_6 <= 0 || this.num_6 >= 5){
                        $.modal.alertError("层的范围为：01 -- 04，请正确输入！！");
                        this.flag = false;
                        return;
                    }else{
                        this.flag = true;
                    }
                }else{
                    $.modal.alertError("层的范围为：01 -- 04，请正确输入！！");
                    this.flag = false;
                    return;
                }
                if(this.flag == true){
                    var cellCode = this.num_0.concat(this.num_1).concat(this.num_2).concat(this.num_3).concat(this.num_4).concat(this.num_5).concat(this.num_6);
                    this.checkCellCode = cellCode;
                }
            },
            getItems: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/itemInfo/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.items = data.rows;
                    }
                });
            },
            getBatchs: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/boxItembacth/findList",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.batchs = data.rows;
                    }
                });
            }
        },
        created(){
            this.getBatchs();
            this.getItems();
        }
    })
</script>
</body>
</html>
